Aproveche todo el potencial de su Aplicaci贸n Web Progresiva (PWA) con una comprensi贸n completa del Manifiesto de la Aplicaci贸n Web. Aprenda a configurar su PWA.
Manifiesto de la Aplicaci贸n Web: Su Gu铆a para la Configuraci贸n de la Aplicaci贸n Web Progresiva
El Manifiesto de la Aplicaci贸n Web es un archivo JSON que proporciona informaci贸n sobre su aplicaci贸n web a los navegadores y sistemas operativos. Esta informaci贸n se utiliza cuando la aplicaci贸n se instala en el dispositivo de un usuario, definiendo c贸mo aparece y se comporta como una Aplicaci贸n Web Progresiva (PWA). Piense en ello como el plano que transforma su sitio web en una experiencia instalable, similar a una aplicaci贸n. Un manifiesto bien configurado es crucial para la participaci贸n del usuario y la capacidad de descubrimiento.
驴Qu茅 es una Aplicaci贸n Web Progresiva (PWA)?
Antes de profundizar en el Manifiesto de la Aplicaci贸n Web, recapitulemos qu茅 es una PWA. Las PWA son aplicaciones web que ofrecen a los usuarios una experiencia similar a la de una aplicaci贸n. Son:
- Confiables: Se cargan instant谩neamente y funcionan sin conexi贸n o en redes de baja calidad, gracias a los service workers.
- R谩pidas: Responden r谩pidamente a las interacciones del usuario con animaciones fluidas y sin desplazamiento brusco.
- Atractivas: Ofrecen una experiencia de usuario inmersiva con funciones como notificaciones push y la capacidad de instalarse en la pantalla de inicio.
El Rol del Manifiesto de la Aplicaci贸n Web
El Manifiesto de la Aplicaci贸n Web es la piedra angular de una PWA. Proporciona la informaci贸n necesaria para que los navegadores:
- Instalen la PWA: Permite a los usuarios instalar la aplicaci贸n web en sus dispositivos, agreg谩ndola a su pantalla de inicio o iniciador de aplicaciones.
- Muestren la PWA correctamente: Define el nombre de la aplicaci贸n, los iconos, el color del tema y otros aspectos visuales.
- Controlen el comportamiento de la PWA: Especifica c贸mo debe iniciarse la aplicaci贸n (por ejemplo, en modo de pantalla completa o como una ventana independiente) y c贸mo debe integrarse con el sistema operativo.
Creando su archivo `manifest.json`
El Manifiesto de la Aplicaci贸n Web es un archivo JSON, t铆picamente llamado `manifest.json`. Debe colocarse en el directorio ra铆z de su aplicaci贸n web. Aqu铆 hay un ejemplo b谩sico:
{
"name": "My Awesome PWA",
"short_name": "Awesome PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Desglosemos cada una de estas propiedades:
`name`
El nombre completo de su aplicaci贸n web. Este nombre se mostrar谩 a los usuarios cuando se les solicite que instalen la aplicaci贸n y en el iniciador de aplicaciones.
Ejemplo:
"name": "Global News App"
`short_name`
Una versi贸n m谩s corta del nombre de su aplicaci贸n, utilizada cuando hay espacio limitado, como en la pantalla de inicio o en el iniciador de aplicaciones. Mant茅ngalo conciso.
Ejemplo:
"short_name": "Global News"
`start_url`
La URL que la aplicaci贸n debe cargar cuando se inicia. Por lo general, es la p谩gina de inicio de su aplicaci贸n web, pero puede ser una p谩gina de destino espec铆fica.
Ejemplo:
"start_url": "/"
Tambi茅n puede usar una URL con par谩metros de consulta para rastrear c贸mo los usuarios est谩n iniciando su PWA:
"start_url": "/?utm_source=homescreen"
`display`
Define c贸mo se debe mostrar la aplicaci贸n cuando se inicia. Hay varias opciones:
- `standalone`: La aplicaci贸n se abrir谩 en su propia ventana de nivel superior, sin elementos de la interfaz de usuario del navegador como la barra de direcciones.
- `fullscreen`: La aplicaci贸n ocupar谩 toda la pantalla, ocultando incluso la barra de estado.
- `minimal-ui`: Similar a `standalone`, pero proporciona una interfaz de usuario del navegador m铆nima, como un bot贸n de retroceso y un bot贸n de actualizaci贸n.
- `browser`: La aplicaci贸n se abrir谩 en una pesta帽a o ventana normal del navegador.
Recomendaci贸n: `standalone` es generalmente la opci贸n preferida para las PWA.
Ejemplo:
"display": "standalone"
`background_color`
El color de fondo de la pantalla de presentaci贸n de la aplicaci贸n cuando se inicia. Esto es importante para proporcionar una transici贸n fluida entre el icono de la aplicaci贸n y el contenido de la aplicaci贸n.
Ejemplo:
"background_color": "#ffffff"
`theme_color`
El color del tema utilizado para estilizar la interfaz de usuario de la aplicaci贸n, como la barra de estado en Android. Este color debe coincidir con la marca de su aplicaci贸n.
Ejemplo:
"theme_color": "#000000"
`icons`
Una matriz de objetos, cada uno representando un icono para la aplicaci贸n. Debe proporcionar m煤ltiples iconos de diferentes tama帽os para asegurarse de que la aplicaci贸n se vea bien en diferentes dispositivos y resoluciones.
Propiedades para cada icono:
- `src`: La URL de la imagen del icono.
- `sizes`: Las dimensiones del icono en p铆xeles (por ejemplo, "192x192").
- `type`: El tipo MIME de la imagen del icono (por ejemplo, "image/png").
Tama帽os de iconos recomendados:
- 48x48
- 72x72
- 96x96
- 144x144
- 192x192
- 512x512
Ejemplo:
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
Propiedades adicionales del manifiesto
Si bien las propiedades anteriores son las m谩s comunes, el Manifiesto de la Aplicaci贸n Web admite muchas otras opciones para configurar su PWA:
`id`
Un identificador 煤nico para su PWA. Esto es importante para evitar conflictos si tiene varias PWAs con el mismo nombre.
Ejemplo:
"id": "com.example.myapp"
`scope`
Define el alcance de navegaci贸n de la aplicaci贸n. Esto determina qu茅 URL dentro de su sitio web se consideran parte de la PWA. Si el usuario navega fuera del alcance, la aplicaci贸n se abrir谩 en una pesta帽a normal del navegador.
Ejemplo:
"scope": "/app/"
En este ejemplo, solo las URL que comienzan con `/app/` se considerar谩n parte de la PWA.
`orientation`
Especifica la orientaci贸n de la pantalla preferida para la aplicaci贸n. Las opciones incluyen `portrait`, `landscape`, `any` y m谩s.
Ejemplo:
"orientation": "portrait"
`related_applications`
Una matriz de objetos que definen aplicaciones nativas relacionadas. Esto le permite promocionar sus aplicaciones nativas a los usuarios que ya han instalado su PWA.
Ejemplo:
"related_applications": [
{
"platform": "play",
"id": "com.example.myapp"
}
]
Este ejemplo indica que hay una aplicaci贸n nativa relacionada en Google Play Store con el ID `com.example.myapp`.
`prefer_related_applications`
Un valor booleano que indica si el usuario debe ser invitado a instalar la aplicaci贸n nativa relacionada en lugar de la PWA.
Ejemplo:
"prefer_related_applications": true
`categories`
Una matriz de cadenas que representan las categor铆as de la aplicaci贸n. Esto puede ayudar a los usuarios a encontrar su aplicaci贸n en las tiendas de aplicaciones o en los resultados de b煤squeda.
Ejemplo:
"categories": ["news", "information"]
`shortcuts`
Define una lista de accesos directos a los que los usuarios pueden acceder desde el icono de la aplicaci贸n en la pantalla de inicio. Esto permite a los usuarios realizar r谩pidamente tareas comunes dentro de la aplicaci贸n.
Ejemplo:
"shortcuts": [
{
"name": "脷ltimas noticias",
"short_name": "Noticias",
"description": "Lea los 煤ltimos art铆culos de noticias",
"url": "/news",
"icons": [{
"src": "/icons/news.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
Enlazar el Manifiesto a su Aplicaci贸n Web
Una vez que haya creado su archivo `manifest.json`, debe enlazarlo a su aplicaci贸n web agregando una etiqueta `` a la secci贸n `
` de su HTML:
<link rel="manifest" href="/manifest.json">
Validando su Manifiesto
Es importante validar su archivo `manifest.json` para asegurarse de que est茅 formateado correctamente y contenga todas las propiedades requeridas. Puede usar herramientas en l铆nea como JSONLint o las Chrome DevTools para validar su manifiesto.
Probando su PWA
Despu茅s de crear y vincular su manifiesto, debe probar su PWA en diferentes navegadores y dispositivos para asegurarse de que funcione como se espera. Use Chrome DevTools (Application -> Manifest) para inspeccionar su manifiesto y diagnosticar cualquier problema.
Mejores Pr谩cticas para la Configuraci贸n del Manifiesto de la Aplicaci贸n Web
Aqu铆 hay algunas mejores pr谩cticas a tener en cuenta al configurar su Manifiesto de la Aplicaci贸n Web:
- Proporcione todas las propiedades requeridas: Aseg煤rese de haber incluido todas las propiedades esenciales, como `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` e `icons`.
- Use tama帽os de iconos apropiados: Proporcione m煤ltiples iconos de diferentes tama帽os para admitir diferentes dispositivos y resoluciones.
- Elija el modo de visualizaci贸n correcto: Seleccione el modo `display` que mejor se adapte a la experiencia de usuario de su aplicaci贸n. `standalone` es generalmente la opci贸n preferida.
- Valide su manifiesto: Siempre valide su archivo `manifest.json` para asegurarse de que est茅 formateado correctamente.
- Pruebe su PWA: Pruebe su PWA en diferentes navegadores y dispositivos para asegurarse de que funcione como se espera.
- Optimice para SEO: Use palabras clave relevantes en su `name`, `short_name` y `description` para mejorar la capacidad de descubrimiento de su aplicaci贸n.
- Considere la localizaci贸n: Si su aplicaci贸n est谩 dirigida a una audiencia global, considere proporcionar versiones localizadas de su manifiesto con diferentes nombres, descripciones e iconos para diferentes idiomas.
Ejemplos de Manifiestos de Aplicaciones Web bien configurados
Aqu铆 hay algunos ejemplos de Manifiestos de Aplicaciones Web bien configurados de PWA populares:
Twitter Lite
{
"name": "Twitter Lite",
"short_name": "Twitter",
"icons": [
{
"src": "/static/icons/mstile-150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/static/icons/twitter-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/twitter-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1da1f2",
"description": "Twitter Lite es una forma m谩s r谩pida y amigable con los datos de ver lo que est谩 sucediendo en el mundo.",
"orientation": "portrait"
}
Starbucks
{
"name": "Starbucks",
"short_name": "Starbucks",
"icons": [
{
"src": "/static/icons/starbucks-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/starbucks-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#f2f0eb",
"theme_color": "#00704a",
"description": "Ordene sus bebidas y alimentos favoritos de Starbucks con la aplicaci贸n.",
"orientation": "portrait",
"shortcuts": [
{
"name": "Ordenar ahora",
"short_name": "Ordenar",
"description": "Iniciar un nuevo pedido",
"url": "/order",
"icons": [{
"src": "/static/icons/order-icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
}
El futuro del Manifiesto de la Aplicaci贸n Web
El Manifiesto de la Aplicaci贸n Web es un est谩ndar en evoluci贸n, con nuevas funciones y capacidades que se agregan con el tiempo. Est茅 atento a las 煤ltimas actualizaciones y recomendaciones del W3C para asegurarse de que sus PWA aprovechen al m谩ximo las 煤ltimas tecnolog铆as.
Conclusi贸n
El Manifiesto de la Aplicaci贸n Web es un componente esencial de cualquier PWA. Al configurar correctamente su manifiesto, puede proporcionar una experiencia de usuario fluida y atractiva, haciendo que su aplicaci贸n web se sienta como una aplicaci贸n nativa. Esta gu铆a ha proporcionado una descripci贸n general completa del Manifiesto de la Aplicaci贸n Web, incluidas sus propiedades, mejores pr谩cticas y ejemplos. Al seguir estas pautas, puede desbloquear todo el potencial de sus PWA y ofrecer una experiencia de usuario superior a sus usuarios de todo el mundo.
Adopte el poder del Manifiesto de la Aplicaci贸n Web y transforme sus sitios web en experiencias instalables, similares a aplicaciones que deleitan a los usuarios e impulsan la participaci贸n.